<template>
	<view class="page padding-top-sm">
		<view class="head title flex align-center justify-center" v-if="hidden">
			<text class="iconfont icon-tuikuan text-green margin-right-xs" style="font-size: 44rpx;"></text>
			<text>已退号</text>
		</view>
		<view class="info bg-white padding-bottom-xs">
			<view class="title" v-if="!hidden">就诊凭证</view>
			<view class="list">
				<view class="item">
					<text>就诊患者</text>
					<text>张三 (女 24岁) 130****3497</text>
				</view>
				<view class="item">
					<text>就诊时间</text>
					<text>周五2023年09月22日上午</text>
				</view>
				<view class="item">
					<text>就诊医院</text>
					<text>安徽中医药大学第二附属医院(三甲）</text>
				</view>
				<view class="item">
					<text>就诊科室</text>
					<text>妇科</text>
				</view>
				<view class="item">
					<text>就诊医生</text>
					<text>顿巨燕 副主任医师</text>
				</view>
				<view class="item">
					<text>门诊类型</text>
					<text>副主任医师号(挂号费 23.00元)</text>
				</view>
				<view class="item">
					<text>医院地址</text>
					<text>安徽省合肥寿春路300号</text>
				</view>
				<view class="item">
					<text>预约单号</text>
					<text>20230920111505873611</text>
				</view>
				<view class="item" v-if="!hidden">
					<text>预约操作</text>
					<text @tap="show = true" class="text-green">点此退号</text>
				</view>
			</view>
		</view>
		
		<view class="tips" v-if="!hidden">
			<view class="text">加班门诊由医生本人自愿加班提供号源，医院挂号处、护士台、导诊台可能均不知情，请严格按上述提示及短信说明就诊 </view>
			<view class="text">退号: 就诊当天早00:00前可在[我的预约]内在线退号，逾期不再办理 </view>
			<view class="text">未就诊：预约未就诊，将被拉黑不再提供挂号服务 </view>
			<view class="text">风险: 若医生临时停诊，您将无法看诊意查看短信通知及接听客服电话</view>
		</view>
		<u-modal v-model="show" :content="content" confirm-color="#E31F1F" cancel-color="#000" show-cancel-button :show-title="false" :confirm-style="{borderLeft:'1px solid rgba(0,0,0,0.1)'}" @confirm="hidden = true"></u-modal>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				show: false,
				content: '同一天退号达5次则当日不可再预约，请确认是否退号',
				hidden: false
			}
		},
		computed: {
			...mapState(['user','common'])
		},
		methods: {
			
		}
	}
</script>

<style lang="less" scoped>
page {
	background-color: #EDEDED;
}
.title {
	font-size: 38rpx;
	font-family: PingFang SC-Bold, PingFang SC;
	font-weight: bold;
	color: #333333;
	line-height: 54rpx;
	padding-top: 34rpx;
	text-align: center;
}
.head {
	padding: 14rpx 0 30rpx 0;
}
.info {
	margin-bottom: 38rpx;
	.item {
		padding-left: 56rpx;
		padding-bottom: 34rpx;
		&:nth-child(1) {
			padding-top: 34rpx;
		}
		text {
			display: inline-block;
			&:nth-child(1) {
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 42rpx;
				margin-right: 38rpx;
			}
			&:nth-child(2) {
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 42rpx;
			}
		}
	}
}
.text-green {
	color: #4CBD66 !important;
}
.tips {
	font-size: 30rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #888888;
	line-height: 46rpx;
	margin: 0 48rpx 0 40rpx;
	.text {
		position: relative;
		display: flex;
		padding-left: 18rpx;
		&::after {
			position: absolute;
			content: "";
			display: inline-block;
			width: 6rpx;
			height: 6rpx;
			background-color: #888888;
			border-radius: 50%;
			left: 0;
			top: 20rpx;
		}
	}
}
</style>
